<template>
    <div class="Box">
        <img :src="props.cover"/>
        <div class="infoBox">
            <p>
                <span>{{ props.tag_name }}</span>
                <img :src="props.head_cover"/>
            </p>
            <p>
                <span>{{ props.archive_count }}投稿</span>
                <span>{{ formatNum(props.featured_count)}}精选视频</span>
            </p>
            <p>
                <el-button>进入频道</el-button>
                <el-button type="primary">+订阅{{ formatNum(props.subscribed_count) }}</el-button>
            </p>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { TagItem } from "./typeInterface"
import { formatNum } from '@/utils/format'

interface Props extends TagItem{

}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
.Box{
    @include flexColumnCenter;
    width: 100%;
    & img:nth-child(1){
        width: 100%;
        height: 60px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }
}
.infoBox{
    width: 100%;
    padding: 0 10px;
    margin-top: -45px;
    & p:nth-child(1){
        width: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }
    & p:nth-child(1) img:nth-child(2){
        width: 50px;
        height: 50px;
    }
    & p:nth-child(1) span:nth-child(1){
        color: #18191C;
        font-size: 14px;
        margin-top: 10px;
    }
    & p:nth-child(2){
        @include flexRowCenter;
        gap: 5px;
        color: #9499A0;
        font-size: 12px;
    }
    & p:nth-child(3){
        @include flexRowCenter;
    }

}
</style>